﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>I Love U, Xiaolin Li! 520 快乐!</title>
    <link type="text/css" rel="stylesheet" href="./love/default.css" />

    <script type="text/javascript" src="./love/jquery.min.js"></script>
    <script type="text/javascript" src="./love/jscex.min.js"></script>
    <script type="text/javascript" src="./love/jscex-parser.js"></script>
    <script type="text/javascript" src="./love/jscex-jit.js"></script>
    <script
      type="text/javascript"
      src="./love/jscex-builderbase.min.js"
    ></script>
    <script type="text/javascript" src="./love/jscex-async.min.js"></script>
    <script
      type="text/javascript"
      src="./love/jscex-async-powerpack.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./love/functions.js"
      charset="utf-8"
    ></script>
    <script
      type="text/javascript"
      src="./love/love.js"
      charset="utf-8"
    ></script>

    <style type="text/css">
      <!--
      .STYLE1 {color: #666666}
      -->
    </style>
  </head>

  <body>
    <audio id="lovemp3" autoplay="autopaly" >
      <source src="love.mp3" type="audio/mp3" />
    </audio>
    <div id="main">
      <div id="error">
        本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a
          href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI"
          >Chrome</a
        >)浏览器，或者其他游览器的最新版本。
      </div>
      <div id="wrap">
        <div id="text">
          <div id="code">
            <p>
              <font color="#FF0000">
                <span class="say"><h1>给 李小林 的一封信</h1></span><br /><br />
                <span class="say"
                  >当我和你在一起时，我的心情总是充满了欢乐和喜悦。我喜欢与你分享生活中的点滴，每一次与你电话都让我感到无比的舒适和温暖。
                  你的存在让我的世界变得更加美好和有意义，你的聪明和智慧总是启发我，让我变得更加成熟和有思想。每一个和你在一起的瞬间，都是我最珍贵的回忆。
                  让我们继续相互支持和珍惜对方，共同走过这段美好的人生旅程吧。我会一直爱你，直到永远。 </span
                ><br />
                <span class="say"><span class="space"></span> -- 吴师晴 --</span><br />
                <span class="say"><h1>520快乐</h1></span><br />
                <span class="say" style="position: relative;"><img class="love-img-aixin" src="./aixin.png" alt="" srcset=""/>
              </font>
            </p>
          </div>
        </div>
        <canvas id="canvas" width="1100" height="680"></canvas>
      </div>
      <button style="position:relative;/*设置定位，偏移量，让元素实现上下居中*/
      width: 240px;
line-height: 38px;
text-align: center;
font-weight: bold;
font-size: 18px;
color: pink;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
cursor: pointer;
			top:50%;
      left: 50%;
			transform: translateY(-50%);/*使用平移使图片居中，思想与方法一一致*/
      transform: translateX(-50%);
      " id="clickbutton">click me to tell your choice</button>
    </div>

    

    <script>
      (function () {
        var canvas = $("#canvas");

        if (!canvas[0].getContext) {
          $("#error").show();
          return false;
        }

        var width = canvas.width();
        var height = canvas.height();
        canvas.attr("width", width);
        canvas.attr("height", height);
        var opts = {
          seed: {
            x: width / 2 - 20,
            color: "rgb(190, 26, 37)",
            scale: 2,
          },
          branch: [
            [
              535,
              680,
              570,
              250,
              500,
              200,
              30,
              100,
              [
                [
                  540,
                  500,
                  455,
                  417,
                  340,
                  400,
                  13,
                  100,
                  [[450, 435, 434, 430, 394, 395, 2, 40]],
                ],
                [
                  550,
                  445,
                  600,
                  356,
                  680,
                  345,
                  12,
                  100,
                  [[578, 400, 648, 409, 661, 426, 3, 80]],
                ],
                [539, 281, 537, 248, 534, 217, 3, 40],
                [
                  546,
                  397,
                  413,
                  247,
                  328,
                  244,
                  9,
                  80,
                  [
                    [427, 286, 383, 253, 371, 205, 2, 40],
                    [498, 345, 435, 315, 395, 330, 4, 60],
                  ],
                ],
                [
                  546,
                  357,
                  608,
                  252,
                  678,
                  221,
                  6,
                  100,
                  [[590, 293, 646, 277, 648, 271, 2, 80]],
                ],
              ],
            ],
          ],
          bloom: {
            num: 700,
            width: 1080,
            height: 650,
          },
          footer: {
            width: 1200,
            height: 5,
            speed: 10,
          },
          type: "star",
        };

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas
          .click(function (e) {
            console.log("load")
        const lovevideo = document.querySelector("#lovemp3")
        setTimeout(()=>{
          lovevideo.muted = false
          lovevideo.autoplay = true
          lovevideo.play()
        }, 1000)

            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
              hold = 0;
              canvas.unbind("click");
              canvas.unbind("mousemove");
              canvas.removeClass("hand");
            }
          })
          .mousemove(function (e) {
            var offset = canvas.offset(),
              x,
              y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass("hand", seed.hover(x, y));
          });

        var seedAnimate = eval(
          Jscex.compile("async", function () {
            seed.draw();
            while (hold) {
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
              seed.scale(0.95);
              $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
              seed.move(0, 2);
              foot.draw();
              $await(Jscex.Async.sleep(10));
            }
          })
        );

        var growAnimate = eval(
          Jscex.compile("async", function () {
            do {
              tree.grow();
              $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
          })
        );

        var flowAnimate = eval(
          Jscex.compile("async", function () {
            do {
              tree.flower(2);
              $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
          })
        );

        var moveAnimate = eval(
          Jscex.compile("async", function () {
            tree.snapshot("p1", 240, 0, 610, 680);
            while (tree.move("p1", 500, 0)) {
              foot.draw();
              $await(Jscex.Async.sleep(10));
            }
            foot.draw();
            tree.snapshot("p2", 500, 0, 610, 680);

            // 会有闪烁不得意这样做, (＞﹏＜)
            canvas
              .parent()
              .css("background", "url(" + tree.toDataURL("image/png") + ")");
            canvas.css("background", "#ffe");
            $await(Jscex.Async.sleep(300));
            canvas.css("background", "none");
          })
        );

        var jumpAnimate = eval(
          Jscex.compile("async", function () {
            var ctx = tree.ctx;
            while (true) {
              tree.ctx.clearRect(0, 0, width, height);
              tree.jump();
              foot.draw();
              $await(Jscex.Async.sleep(25));
            }
          })
        );

        var textAnimate = eval(
          Jscex.compile("async", function () {
            var together = new Date("May 11, 2013 16:15:00");

            $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
              timeElapse(together);
              $await(Jscex.Async.sleep(1000));
            }
          })
        );

        var runAsync = eval(
          Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());

            textAnimate().start();

            $await(jumpAnimate());
          })
        );

        runAsync().start();
      })();
      const btn = document.querySelector("#clickbutton")
      btn.addEventListener("click", nextPage)
      function nextPage() {
        console.log("click")
                        window.location.href = "home.html";
                    }
    </script>
  </body>
</html>
